<!DOCTYPE html>
<html>
    <head>
        <link href='css/fullcalendar.css' rel='stylesheet' />
        <link href='css/layout.css' rel='stylesheet' />
        <link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
        <script src='js/jquery.min.js'></script>
        <script src='js/jquery-ui.custom.min.js'></script>
        <script src='js/fullcalendar.js'></script>

        <title>Start Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>

            $(document).ready(function() {

                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                $('#calendar').fullCalendar({
                header: {
                left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                },
                        editable: true,
                        allDayDefault: false,
                        events: { // Render the events in the calendar
                                url: 'http://localhost:8080/mygym-web/rest/events/get', // Get the URL of the json feed
                                type: 'GET', // Send post data
                                error: function(e) {
                                    alert('There was an error while fetching events.' + e); // Error alert
                                }
                            }
                        });
                    });

        </script>
        <style>

            body {
                margin-top: 40px;
                text-align: center;
                font-size: 14px;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            }

            #calendar {
                width: 900px;
                margin: 0 auto;
            }

        </style>

    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>
